<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Document, Link, View, Download } from '@element-plus/icons-vue';
import { ElLoading } from 'element-plus';

const props = defineProps<{
	url: string;
	previewServer?: string;
}>();

const previewUrl = ref('');
const loading = ref(true);
const iframeError = ref(false);
const previewContainer = ref<HTMLElement | null>(null);
let loadingInstance: any = null;

// Base64编码函数
const base64Encode = (str: string): string => {
	if (window && window.btoa) {
		return window.btoa(unescape(encodeURIComponent(str)));
	}
	return str;
};

// 生成预览链接
const generatePreviewUrl = () => {
	if (!props.url) return '';
	const server = props.previewServer || 'http://127.0.0.1:8012';
	// 简化参数，仅保留必要的选项
	return `${server}/onlinePreview?url=${encodeURIComponent(base64Encode(props.url))}&fullscreen=false&disabledownload=true`;
};

// iframe加载完成
const handleIframeLoad = () => {
	loading.value = false;
	if (loadingInstance) {
		loadingInstance.close();
	}
};

// iframe加载出错
const handleIframeError = () => {
	loading.value = false;
	if (loadingInstance) {
		loadingInstance.close();
	}
	iframeError.value = true;
};

// 直接打开预览
const openInNewTab = () => {
	if (props.url) {
		const server = props.previewServer || 'http://127.0.0.1:8012';
		// 使用onlinePreview接口在新窗口打开预览
		const fullUrl = `${server}/onlinePreview?url=${encodeURIComponent(base64Encode(props.url))}`;
		window.open(fullUrl, '_blank');
	}
};

// 直接下载文件
const downloadFile = () => {
	if (props.url) {
		// 直接打开原始文件URL进行下载
		window.open(props.url, '_blank');
	}
};

onMounted(() => {
	previewUrl.value = generatePreviewUrl();
	
	// 创建loading实例
	if (previewContainer.value) {
		loadingInstance = ElLoading.service({
			target: previewContainer.value,
			text: '加载文件预览中...',
			background: 'rgba(255, 255, 255, 0.8)'
		});
	}
});
</script>

<template>
	<div class="file-preview" ref="previewContainer">
		<iframe
			v-show="previewUrl && !iframeError && !loading"
			:src="previewUrl"
			class="preview-iframe"
			frameborder="0"
			@load="handleIframeLoad"
			@error="handleIframeError"
			sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
			allowfullscreen
			referrerpolicy="no-referrer"
		/>
		<div v-if="iframeError || !url" class="preview-error">
			<el-empty description="无法在页面内预览此文件" />
			<div class="preview-actions">
				<el-button v-if="url" type="primary" @click="openInNewTab" class="mt-3" :icon="View">在线预览</el-button>
				<el-button v-if="url" type="success" @click="downloadFile" class="mt-3" :icon="Download">下载文件</el-button>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.file-preview {
	width: 100%;
	position: relative;
	min-height: 300px;
	border-radius: 8px;
	overflow: hidden;

	.preview-iframe {
		width: 100%;
		height: 500px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		&:hover {
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		}
	}

	.preview-error {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 300px;
		background-color: #f8f9fa;
		border-radius: 8px;
		border: 1px dashed #e0e0e0;
		.preview-actions {
			display: flex;
			gap: 12px;
			margin-top: 20px;
		}
	}
}

:deep(.el-loading-text) {
	font-size: 14px;
	color: var(--el-color-primary);
	margin-top: 8px;
}
</style>
